<template>
  <view class="container">
    <view class="user-info">
      <button @click="chooseAvatar"> <image class="avatar" src="../../static/avatar.png" alt="avatar" />
	  </button>
	  </view>
      <view class="info">
		<text class="label">用户名</text>
        <input class="username" placeholder="请输入用户名" />
      <picker mode="selector" :range="genders" @change="onGenderChange">
        <text class="label">性别</text>
        <text class="value">{{ gender }}</text>
        <img src="../../static/跳转.png" alt="arrow" class="arrow-icon" />
      </picker>
	  
      <picker mode="selector" :range="heights" @change="onHeightChange">
        <text class="label">身高</text>
        <text class="value">{{ height }}</text>
		<img src="../../static/跳转.png" class="arrow-icon"/>
      </picker>
      <picker mode="selector" :range="weights" @change="onWeightChange">
        <text class="label">体重</text>
        <text class="value">{{ weight }}</text>
        <img src="../../static/跳转.png" alt="arrow" class="arrow-icon" />
      </picker>
      <picker mode="date" @change="onDateChange">
        <text class="label">生日</text>
        <text class="value">{{ birthday }}</text>
        <img src="../../static/跳转.png" alt="arrow" class="arrow-icon" />
      </picker>
      <picker mode="selector" :range="bloodTypes" @change="onBloodTypeChange">
        <text class="label">血型</text>
        <text class="value">{{ bloodType }}</text>
        <img src="../../static/跳转.png" alt="arrow" class="arrow-icon" />
      </picker>
    </view>
  </view>
  
</template>
<script>
export default {
  data() {
    return {
      genders: ['男', '女'],
      heights: ['150厘米', '151厘米', '152厘米', '153厘米', '154厘米', '155厘米', '156厘米', '157厘米', '158厘米', '159厘米', '160厘米', '161厘米', '162厘米', '163厘米', '164厘米', '165厘米', '166厘米', '167厘米', '168厘米', '169厘米', '170厘米', '171厘米', '172厘米', '173厘米', '174厘米', '175厘米', '176厘米', '177厘米', '178厘米', '179厘米', '180厘米', '181厘米', '182厘米', '183厘米', '184厘米', '185厘米', '186厘米', '187厘米', '188厘米', '189厘米', '190厘米'],
      weights: ['40kg', '41kg', '42kg', '43kg', '44kg', '45kg', '46kg', '47kg', '48kg', '49kg', '50kg', '51kg', '52kg', '53kg', '54kg', '55kg', '56kg', '57kg', '58kg', '59kg', '60kg', '61kg', '62kg', '63kg', '64kg', '65kg', '666kg', '67kg', '68kg', '69kg', '70kg', '71kg', '72kg', '73kg', '74kg', '75kg', '76kg', '77kg', '78kg', '79kg'],
      bloodTypes: ['A型', 'B型', 'AB型', 'O型'],
      gender: 0,
      height: 18,
      weight: 70,
      birthday: '2000-01-01',
      bloodType: 3
    };
  },
  methods: {
    onGenderChange(e) {
      this.gender =this.genders[e.detail.value];
    },
    onHeightChange(e) {
      this.height = this.heights[e.detail.value];
    },
    onWeightChange(e) {
      this.weight = this.weights[e.detail.value];
    },
    onDateChange(e) {
      this.birthday = e.detail.value;
    },
    onBloodTypeChange(e) {
      this.bloodType = this.bloodTypes[e.detail.value];
    },
	chooseAvatar(){
		uni.chooseImage({
			count:1,
			success:(res)=>{
				this.avatar=res.tempFilePaths[0];
			}
		})
	}
  }
};
</script>
<style scoped>
.container {
  padding: 10px;
  background-color: #f8f8f8;
}
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: white; /* 设置文字颜色 */
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 10px;
}
.info {
  display: flex;
  flex-direction: column;
}
.username {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.label {
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
}
.value {
  font-size: 16px;
  color: #555;
}
.arrow-icon {
  width: 20px;
  height: 20px;
  display: flex;
  margin-left:auto ;
}
</style>